<template>
	<view class="page-wraper">
		<view class="header-view-box">
			<view class="view-box">
				<view class="price_title_view">
					<!-- <view class="gradient_view" style="position: absolute; z-index: inherit;"> -->
					<!-- </view> -->
					<text class="title">报价列表</text>
				</view>
			</view>
		</view>
		
		<view class="price_card">
			<view style="padding-top: 10px; margin-right: 8px; margin-left: 8px; ">
				<view style="flex-direction: row; display: flex;">
					<view class="" style="align-items: center; flex-direction: row;display: flex;flex: 1;">
						<view style="text-align: center; width: 22px; height: 22px; background: #416CD1; opacity: 1;border-radius: 11px;">
							<text class="primary_num">01</text>
						</view>
						<text class="price_text">36.5</text>
						<text class="price_text" style="font-size: 15px; font-weight: 500;color: #333333;">万</text>
						<text class="guide_text ">指导价：32.18万 </text>
					</view>
					<view class="time_text" style="text-align: center;">还剩5小时45分钟失效</view>
				</view>
				
				<view style="margin-left: 12px; margin-top: 4px ;flex-direction: row; display: flex;">
					<text class="guide_text" style="color: #333333;">定金5000.00元</text>
					<text class="guide_text" style="color: #333333;">车在东区</text>
				</view>
				
				<view class="logis_bar" style="align-items: center; display: flex;">
					<view class="black_text" style="margin-left: 14px;"> 物流参考价 </view>
					<view style="flex: 1;"></view>
					<view class="black_text" style="flex-direction: row; display: flex;"> 
						<text class="black_text">1400元起</text>
						<image class="right_btn" style=" padding-top: 1px; padding-left: 5px;padding-right: 10px;" src="/static/right_back.png" mode=""></image>
					</view>
				</view>
				
				<view style="margin-top: 15px; flex-direction: row; display: flex;">
					<view class="name_text">张三岁</view>
					<view style="margin-left: 4px; width: 15px; height: 15px; background: #DEDEDE; border-radius: 10px;"></view>
					<view class="black_text" style="margin-left: 14px;">好评 0</view>
					<view class="black_text" style="margin-left: 14px;">粉丝 0</view>
				</view>
				
				<view class="black_text" style="margin-top: 8px;">
					注册时长：2个月
				</view>
				
				<view style="padding-bottom: 16px; display: flex; flex-direction: row; 8px;">
					<view style="flex: 1;"></view>
					<view class="feeckback_btn">反馈</view>
					<view @click="connect()" class="connect_btn">联系上游</view>
				</view>
			</view>
			
		</view>
		
		<view class="find_card">
			<view class="price_title_view" style="">
				<text class="title">寻车信息</text>
			</view>
			
			<view style="margin-right:10px; margin-top: 10px; margin-left: 18px;">	
				<view class="subtitle_text">寻奥迪A4L 23款 雅致 3218</view>
				<view class="find_left_text" style="margin-top:17px;">指导价：32.18万</view>
				<view style="flex-direction: row; display: flex; margin-top:13px;">
					<view class="find_left_text">外观内饰</view>
					<view style="flex: 1;"></view>
					<view class="find_right_text">黑/棕</view>
				</view>
				<view style="flex-direction: row; display: flex; margin-top:13px;">
					<view class="find_left_text">上牌地区</view>
					<view style="flex: 1;"></view>
					<view class="find_right_text">黑/棕</view>
				</view>
				<view style="flex-direction: row; display: flex; margin-top:13px;">
					<view class="find_left_text">车龄</view>
					<view style="flex: 1;"></view>
					<view class="find_right_text">黑/棕</view>
				</view>
				<view style="flex-direction: row; display: flex; margin-top:13px;">
					<view class="find_left_text">里程</view>
					<view style="flex: 1;"></view>
					<view class="find_right_text">黑/棕</view>
				</view>
				<view style="flex-direction: row; display: flex; margin-top:13px;">
					<view class="find_left_text">预算</view>
					<view style="flex: 1;"></view>
					<view class="find_right_text">黑/棕</view>
				</view>
				<view style="flex-direction: row; display: flex; margin-top:13px;">
					<view class="find_left_text">有效期</view>
					<view style="flex: 1;"></view>
					<view class="find_right_text">黑/棕</view>
				</view>
				<view style="flex-direction: row; display: flex; margin-top:13px;">
					<view class="find_left_text">电话报价</view>
					<view style="flex: 1;"></view>
					<view class="find_right_text">黑/棕</view>
				</view>
				<view style="flex-direction: row; display: flex; margin-top:13px;">
					<view class="find_left_text">发布时间</view>
					<view style="flex: 1;"></view>
					<view class="find_right_text">2023-04-28 21:45</view>
				</view>
				<view class="find_right_text" style="margin-top:13px;">
					备注信息
				</view>
				
				<view class="tag" style="margin-top: 13px;">
					3天内提车
				</view>
				
				<button class="cancel_btn" type="default">
					取消寻车
				</button>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import uniListCarSource from '@/components/uniListCarSource/uniListCarSource.vue'
	export default {
		components: {
			uniListCarSource
		},
		data() {
			return {
			}
		},
		methods: {
			
		
		}
	}
</script>

<style>
	page {
		background: linear-gradient(to bottom, #F0F0F0, #F0F0F0);
	}
	
	.cancel_btn {
		height: 47px;
		margin: 34px 24px 80px 24px;
		background: #0E59EA;
		opacity: 1;
		border-radius: 7px;
		display: flex;
		justify-content: center;
		align-items: center;
		
		font-size: 16px;
		font-weight: 500;
		color: #FFFFFF;
	}
	
	.find_left_text {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		opacity: 1;
	}
	
	.find_right_text {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}
	
	.connect_btn {
		width: 90px;
		height: 30px;
		background: #0E59EA;
		opacity: 1;
		border-radius: 14px;
		margin-right: 10px;
		font-size: 12px;
		font-weight: 500;
		color: #FFFFFF;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.tag {
		width: 90px;
		height: 27px;
		background: #EDF1FF;
		border-radius: 14px;
		font-size: 12px;
		font-weight: 400;
		color: #0E59EA;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.feeckback_btn {
		width: 90px;
		height: 30px;
		border: 1px solid #EDF1FF;
		border-radius: 14px;
		margin-right: 10px;
		
		font-size: 12px;
		font-weight: 500;
		color: #1C2125;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.right_btn {
		width: 7px;
		height: 13px;
	}
	
	
	.logis_bar {
		margin-top: 12px;
		height: 34px;
		background: rgba(230,237,253,1);
		border-radius: 0px;
	}
	
	.subtitle_text {
		font-size: 14px;
		font-weight: bold;
		color: #000026;
		opacity: 1;
		font-family: Alimama ShuHeiTi;
	}
	
	.time_text {
		font-size: 12px;
		font-weight: 500;
		color: #ED2F2F;
		opacity: 1;
		/* background-color: red; */
	}
	
	.name_text {
		font-size: 11px;
		font-weight: bold;
		color: #333333;
		opacity: 1;
	}
	
	.black_text {
		font-size: 11px;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}
	
	.guide_text {
		margin-left: 14px;
		height: 19px;
		font-size: 11px;
		font-weight: 500;
		color: #999999;
		opacity: 1;
	}
	
	.price_text {
		height: 22px;
		font-size: 19px;
		font-family: DIN Alternate;
		font-weight: bold;
		color: #ED2F2F;
		opacity: 1;
		margin-left: 5px;
	}
	
	.primary_num {
		height: 22px;
		font-size: 12px;
		font-weight: 600;
		color: #FFFFFF;
		opacity: 1;
	}
	
	.price_card {
		margin: 70px 14px 0px 14px;
		height: auto;
		background-color: white;
		border-radius: 7px;
		font-family: PingFang SC;
	}
	
	.find_card {
		margin-top: 10px;
		background-color: white;
		height: auto;
		font-family: PingFang SC;
	}
	
	.title {
		font-size: 15px;
		font-weight: bold;
		color: #000026;
		opacity: 1;
		font-family: Alimama ShuHeiTi;
	}
	
	.price_title_view {
		width: 67px;
		margin-top: 34rpx;
		margin-left: 30rpx;
		margin-bottom: 42rpx;
		background: url(/static/bac-small.png);
		background-size: 100% 100%; //背景图片能够显示全
	}

	.gradient_view {
		width: 30px;
		height: 24px;
		background: radial-gradient(circle, #0E59EA 0%, rgba(255,255,255,0) 100%);
		border-radius: 50%;
		opacity: 0.5;
	}

	.page-wraper {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: auto;
	}
	.header-view-box {
		position: fixed;
		top: 10;
		width: 100%;
		z-index: 11;
	}

	.view-box {
		display: flex;
		background-color: white;
	}

	
</style>